﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改客户</title>
    <script src="~/lib/vue/vue.global.min.js"></script>
    <script src="~/lib/element-plus/index.full.js"></script>
    <link href="~/lib/element-plus/index.min.css" rel="stylesheet" />
    <link href="~/lib/element-plus/index.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        .container {
            width: 95%;
            margin: 20px auto;
        }

        .form-group {
            margin-bottom: 20px;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .form-item {
            margin-bottom: 16px;
        }

        .note-input {
            height: 100px;
        }

        .upload-area {
            margin-top: 20px;
        }

        .tip {
            margin-top: 8px;
            color: #666;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 基础信息 -->
        <div class="form-group">
            <h3>基础信息</h3>
            <el-form ref="basicForm" :model="form" label-width="120px">
                <!-- 第一行：客户编码（只读）、客户名称（必填） -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户编码" class="form-item">
                            <el-input v-model="form.customer_code" placeholder="自动获取系统编号" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户名称" required class="form-item">
                            <el-input v-model="form.customer_name" placeholder="请输入客户名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第二行：所属行业、客户来源（下拉选单） -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属行业" required class="form-item">
                            <el-select v-model="form.job_type" placeholder="请选择">
                                <el-option v-for="item in industryOptions" :key="item.dictValue"
                                           :label="item.dictLabel" :value="item.dictValue"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户来源" required class="form-item">
                            <el-select v-model="form.sources_of_customers" placeholder="请选择">
                                <el-option v-for="item in customersourceOptions" :key="item.dictValue"
                                           :label="item.dictLabel" :value="item.dictValue"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第三行：联系人、联系电话 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系人" class="form-item">
                            <el-input v-model="form.contact_person" placeholder="请输入联系人"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" class="form-item">
                            <el-input v-model="form.contact_phone_number" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第四行：电子邮箱、销售部门 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电子邮箱" class="form-item">
                            <el-input v-model="form.email_address" placeholder="请输入电子邮箱"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="销售部门" required class="form-item">
                            <el-select v-model="form.sales_dept_name" placeholder="请选择">
                                <el-option label="销售一部" value="销售一部"></el-option>
                                <el-option label="销售二部" value="销售二部"></el-option>
                                <el-option label="销售三部" value="销售三部"></el-option>
                                <el-option label="大客户部" value="大客户部"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第五行：销售负责人、状态（启用/停用） -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="销售负责人" required class="form-item">
                            <el-select v-model="form.person_in_charge" placeholder="请选择">
                                <el-option label="张三" value="张三"></el-option>
                                <el-option label="李四" value="李四"></el-option>
                                <el-option label="王五" value="王五"></el-option>
                                <el-option label="赵六" value="赵六"></el-option>
                                <el-option label="钱七" value="钱七"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" required class="form-item">
                            <el-radio v-model="form.status" label="1">启用</el-radio>  <!-- 匹配状态1 -->
                            <el-radio v-model="form.status" label="2">停用</el-radio>  <!-- 匹配状态2 -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第六行：客户地址 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="客户地址" class="form-item">
                            <el-input v-model="form.customers_address" placeholder="请输入客户地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第七行：备注 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" class="form-item">
                            <el-input v-model="form.note" type="textarea" placeholder="请输入备注" class="note-input"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 财务信息 -->
        <div class="form-group">
            <h3>财务信息</h3>
            <el-form ref="financeForm" :model="form" label-width="120px">
                <!-- 第一行：账户名称、纳税人识别号 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="账户名称" class="form-item">
                            <el-input v-model="form.account_name" placeholder="请输入账户名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="纳税人识别号" class="form-item">
                            <el-input v-model="form.taxid" placeholder="请输入纳税人识别号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第二行：银行账户、开户银行 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="银行账户" class="form-item">
                            <el-input v-model="form.bank_account" placeholder="请输入银行账户"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开户银行" class="form-item">
                            <el-input v-model="form.opening_bank" placeholder="请输入开户银行"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第三行：开户行地址 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="开户行地址" class="form-item">
                            <el-input v-model="form.bkaddr" placeholder="请输入开户行地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 上传附件（暂不实现文件上传，仅展示） -->
        <div class="form-group">
            <h3>上传附件</h3>
            <div class="upload-area">
                <el-upload action="/CustomerManagement/UploadFile"
                           :file-list.sync="fileList"
                           :on-success="handleUploadSuccess"
                           :before-upload="beforeUpload"
                           :limit="3">
                    <el-button type="primary">上传</el-button>
                </el-upload>
                <div class="tip">您可以上传 doc、pdf、rar 等格式的文件，单个文件上传最大 200MB。</div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div style="margin-top: 20px;">
            <el-button v-on:click="goBack">关闭</el-button>
            <el-button type="primary" v-on:click ="submitUpdate" >保存修改</el-button>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {
                // 1. 表单核心数据（与后端 WMS_Basic_Customer 实体字段对应）
                const form = ref({
                    customer_code: '',       // 自动生成，前端只读
                    customer_name: '',       // 客户名称（必填）
                    job_type: '',            // 所属行业（必填）
                    sources_of_customers: '',// 客户来源（必填）
                    contact_person: '',      // 联系人
                    contact_phone_number: '',// 联系电话
                    email_address: '',       // 电子邮箱
                    customers_address: '',   // 客户地址
                    sales_department_id: 1,  // 销售部门ID（后端关联用，前端可传固定值或下拉映射）
                    // sales_dept_name: '',     销售部门名称（显示用）
                    account_name: '',        // 账户名称
                    taxid: '',               // 纳税人识别号
                    bank_account: '',        // 银行账户
                    opening_bank: '',        // 开户银行
                    bkaddr: '',              // 开户行地址
                    note: '',                // 备注
                    person_in_charge:'' ,    // 销售负责人（必填）
                    status: '',             // 状态：1=启用，0=停用（默认启用）
                    create_by: '',                   //创建人
                    create_time: '',  //创建时间
                    update_by: 'adimin',                  // 更新人
                    update_time: '',  //更新时间
                    annex_code:'',
                   
                });
               

                // 2. 下拉选单数据（从后端字典接口获取）
                const industryOptions = ref([]);       // 所属行业选项
                const customersourceOptions = ref([]); // 客户来源选项
                const fileList = ref([]);              // 上传文件列表

                // 3. 获取后端字典数据（所属行业、客户来源）
                const getIndustryDict = async () => {
                    try {
                        const response = await axios.get('/api/Dict/datas/Industry');
                        industryOptions.value = response.data || [];
                    } catch (error) {
                        console.error('获取所属行业失败：', error);
                        ElementPlus.ElMessage.error('所属行业数据加载失败');
                    }
                };

                const getCustomerSourceDict = async () => {
                    try {
                        const response = await axios.get('/api/Dict/datas/CustomerSource');
                        customersourceOptions.value = response.data || [];
                    } catch (error) {
                        console.error('获取客户来源失败：', error);
                        ElementPlus.ElMessage.error('客户来源数据加载失败');
                    }
                };


                     // 客户所属行业字典回显（根据DictValue获取DictLabel）
                const getCustomerDictValue = async (value) => {
                    try {
                        //调用正确的接口：/api/Dict/label，参数为dictTypeCode和dictValue
                        const response = await axios.get(`/api/Dict/label?dictTypeCode=Industry&dictValue=${value}`);
                        console.log('客户所属行业标签:', response.data); //打印结果
                        return response.data; //返回字典标签（DictLabel）
                    } catch (error) {
                        console.error('客户所属行业标签失败：', error);
                        ElementPlus.ElMessage.error('客户所属行业标签失败，请稍后再试');
                        return ''; //出错时返回空字符串
                    }
                };

               // 客户来源行业字典回显（根据DictValue获取DictLabel）
                const getCustomerServiceDictValue = async (value) => {
                    try {
                        //调用正确的接口：/api/Dict/label，参数为dictTypeCode和dictValue
                        const response = await axios.get(`/api/Dict/label?dictTypeCode=CustomerSource&dictValue=${value}`);
                        console.log('客户来源行业标签:', response.data); //打印结果
                        return response.data; //返回字典标签（DictLabel）
                    } catch (error) {
                        console.error('客户来源行业标签失败：', error);
                        ElementPlus.ElMessage.error('客户来源行业标签失败，请稍后再试');
                        return ''; //出错时返回空字符串
                    }
                };


                 const customerCode = ref(''); // 存储从URL获取的客户编号
                                // 3. 从URL参数中获取客户编号
                    const getUrlParams = () => {
                      const params = new URLSearchParams(window.location.search);
                      customerCode.value = params.get('customerCode') || '';
                    };


           // 4. 加载客户详情（核心：从后端获取数据并回显）
        const loadCustomerDetail = async () => {
          if (!customerCode.value) return;
          try {
            // 步骤1：先获取客户基础数据
            const response = await axios.get('/CustomerManagement/GetCustomerEdit', {
              params: { customerCode: customerCode.value }
            });
              const data = response.data.data;

              // 步骤3：异步查询字典标签（行业和来源），查询完成后更新表单
              const industryLabel = await getCustomerDictValue(data.job_type);
              const sourceLabel = await getCustomerServiceDictValue(data.sources_of_customers);


              if (response.data.success) 
              {
                  form.value = {
                  ...data,
                  job_type: industryLabel,       
                  sources_of_customers: sourceLabel,
                  status: data.status.toString()
                };
                if(form.value.annex_code)
                {
                    await loadAttachments(form.value.annex_code);
                }
              }

            
          } catch (error) {
            console.error('加载客户详情失败：', error);
            ElementPlus.ElMessage.error('加载客户信息失败');
          }
        };

                // 5. 按钮事件
                const goBack = () => window.history.back();          // 关闭（返回上一页）

                // 1. 文件上传前校验（格式+大小）
                const beforeUpload = (file) => {
                    // 允许的文件格式
                    const allowedTypes = ['application/msword', 'application/pdf', 'application/x-rar-compressed'];
                    // 单个文件最大200MB（转换为字节）
                    const maxSize = 200 * 1024 * 1024;

                    // 格式校验
                    if (!allowedTypes.includes(file.type)) {
                        ElementPlus.ElMessage.error('仅支持 doc、pdf、rar 格式文件');
                        return false;
                    }
                    // 大小校验
                    if (file.size > maxSize) {
                        ElementPlus.ElMessage.error('单个文件最大不能超过200MB');
                        return false;
                    }
                    return true;
                };



                  // 2. 上传成功后：获取附件编号（后端返回）并赋值给formData
                const handleUploadSuccess = (response) => {
                    if (response.success) {
                        // 后端需返回“annex_code”（附件编号，关联SysOrgPublicAttachments表）

                       form.value.annex_code = response.data.annex_code;
                        console.log(form.annex_code);
                        ElementPlus.ElMessage.success('附件上传成功');
                    } else {
                        ElementPlus.ElMessage.error('附件上传失败：' + response.message);
                    }
                };


                   // 加载附件列表（新增函数）
                const loadAttachments = async (annexCode) => {
                    try {
                        // 调用后端接口：根据annex_code查询附件
                        const res = await axios.get(`/api/Supplier/GetAttachments?annexCode=${annexCode}`);
                        if (res.data.success) {
                            // 格式化数据为el-upload所需的fileList结构
                            fileList.value = res.data.data.map(file => ({
                                name: file.fileName, // 文件名
                                url: file.fileUrl,   // 文件访问路径（需后端返回可访问的URL）
                                uid: file.id         // 附件唯一标识
                            }));
                        } else {
                            ElementPlus.ElMessage.error(res.data.message);
                        }
                    } catch (error) {
                        console.error('加载附件失败：', error);
                        ElementPlus.ElMessage.error('加载附件失败，请重试');
                    }
                };


               

                
                 // 提交修改
                const submitUpdate = async () => {
                  
                    try {
                        // 构造提交数据
                        const submitData = {
                               customer_code: form.value.customer_code,
                                customer_name: form.value.customer_name,
                                job_type: form.value.job_type, // 转换为数字ID
                                sources_of_customers:  form.value.sources_of_customers, // 转换为数字ID
                                contact_person: form.value.contact_person,
                                contact_phone_number: form.value.contact_phone_number,
                                email_address: form.value.email_address,
                                customers_address: form.value.customers_address,
                                sales_department_id: Number(form.value.sales_department_id),
                                account_name: form.value.account_name,
                                taxid: form.value.taxid,
                                bank_account: form.value.bank_account,
                                opening_bank: form.value.opening_bank,
                                bkaddr: form.value.bkaddr,
                                note: form.value.note,
                                person_in_charge: Number(form.value.person_in_charge), // 数字ID，匹配后端int
                                status: form.value.status.toString(), // 字符串，匹配后端char
                                update_by: form.value.update_by,
                                update_time: new Date().toISOString(),
                                annex_code: form.value.annex_code
                        };

                        console.log(submitData);
                        // 发送PUT请求
                        const res = await axios.put('/CustomerManagement/UpdateCustomer', submitData);
                        console.log(res.data);
                                if (res.data.success) {
                            ElementPlus.ElMessage.success('修改成功');
                            setTimeout(() => window.history.back(), 1000);
                        } else {
                            ElementPlus.ElMessage.error(res.data.Message || '修改失败');
                        }
                    } catch (err) {
                        console.error('提交修改失败:', err);
                        ElementPlus.ElMessage.error(err.response?.data?.Message || '服务器异常');
                    } 

                };



          
                // 6. 页面挂载时加载字典数据
                onMounted(() => {
                    getIndustryDict();
                    getCustomerSourceDict();
                    getUrlParams();
                    loadCustomerDetail();
                });

                return {
                    form,
                    industryOptions,
                    customersourceOptions,
                    fileList,
                    goBack,
                    handleUploadSuccess,
                    beforeUpload,
                    submitUpdate,
                   
                };
            }
        });
        app.use(ElementPlus);
        app.mount('.container');
    </script>
</body>
</html>